<template>
  <div
    class="progress-bar"
    :style="{ height: progressHeight + 'px' }"
    @click="onClick"
    @mousedown="startDrag"
    @touchstart="startDrag"
  >
    <div
      class="progress"
      :style="{ width: draggingProgress + '%', height: progressHeight + 'px' }"
    />
    <div
      class="progressHeader"
      :style="{ left: draggingProgress + '%' }"
    />
    <!-- 显示拖动的进度时间 -->
    <div v-if="isDragging" class="progress-time">{{ formattedTime }}</div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'

  const props = defineProps({
    currentTime: {
      type: Number,
      required: true,
    },
    totalTime: {
      type: Number,
      required: true,
    },
  })

  const emit = defineEmits<{(event: 'updateTime', value: number): void}>()

  const draggingProgress = ref(0) // 用来保存拖动过程中的进度
  const isDragging = ref(false)
  const startX = ref(0)
  const startProgress = ref(0)
  const progressHeight = ref(3) // 默认高度，拖动过程中动态变化

  // 计算当前拖动进度的时分秒格式
  const formattedTime = computed(() => {
    const currentTimeInSeconds = (draggingProgress.value / 100) * props.totalTime
    return formatTime(currentTimeInSeconds)
  })

  const formatTime = (timeInSeconds: number) => {
    const hours = Math.floor(timeInSeconds / 3600)
    const minutes = Math.floor((timeInSeconds % 3600) / 60)
    const seconds = Math.floor(timeInSeconds % 60)

    const pad = (num: number) => num.toString().padStart(2, '0')

    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
  }

  // 更新进度条的显示（外部更新 currentTime 时同步）
  watch(() => props.currentTime, () => {
    if (!isDragging.value) {
      draggingProgress.value = Math.floor((props.currentTime / props.totalTime) * 100)
    }
  })

  // 拖动开始
  const startDrag = (e: MouseEvent | TouchEvent) => {
    isDragging.value = true
    startX.value = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX
    startProgress.value = draggingProgress.value // 保存当前进度
    window.addEventListener('mousemove', onDrag)
    window.addEventListener('mouseup', stopDrag)
    window.addEventListener('touchmove', onDrag)
    window.addEventListener('touchend', stopDrag)
  }

  // 拖动过程
  const onDrag = (e: MouseEvent | TouchEvent) => {
    if (isDragging.value) {
      const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX
      const deltaX = clientX - startX.value
      // 根据鼠标位置计算新的进度条宽度
      draggingProgress.value = Math.min(Math.max(startProgress.value + (deltaX / window.innerWidth) * 100, 0), 100)
      progressHeight.value = 5
    }
  }

  // 拖动结束
  const stopDrag = () => {
    isDragging.value = false
    progressHeight.value = 3
    window.removeEventListener('mousemove', onDrag)
    window.removeEventListener('mouseup', stopDrag)
    window.removeEventListener('touchmove', onDrag)
    window.removeEventListener('touchend', stopDrag)

    // 拖动结束后更新父组件的 currentTime
    if (props.totalTime > 0) {
      const newTime = (draggingProgress.value / 100) * props.totalTime
      emit('updateTime', newTime)
    }
  }

  // 点击进度条时更新进度
  const onClick = (e: MouseEvent | TouchEvent) => {
    const barWidth = (e.target as HTMLElement).clientWidth
    const clickPosition = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX
    draggingProgress.value = Math.min(Math.max((clickPosition / barWidth) * 100, 0), 100)

    // 更新父组件的 currentTime
    if (props.totalTime > 0) {
      const newTime = (draggingProgress.value / 100) * props.totalTime
      emit('updateTime', newTime)
    }
  }

  // 初始化时确保进度条正确显示
  onMounted(() => {
    draggingProgress.value = Math.floor((props.currentTime / props.totalTime) * 100)
  })
</script>

<style lang="scss" scoped>
.progress-bar {
  width: 100%;
  height: 3px;
  background: #ddd;
  border-radius: 5px;
  position: relative;
  transition: 0.2s ease;
  cursor: pointer;
  .progressHeader {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: black;
    width: 7px;
    height: 7px;
    transition: 0.2s ease;
  }
  .progress {
    background: red;
    border-radius: 3px;
    transition: 0.2s ease;
  }
  .progress-time {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    color: black;
    user-select: none;
  }
}
</style>
